import React from "react";
import { useEffect } from "react";
import { useSelector } from "react-redux";
import { AppStore } from "../../../store/reducers";
import Tab from "./Tab";
import "./tabbar.css";

const TabBar = () => {
  const index = useSelector<AppStore>((state) => state.tabBarIndex);
  useEffect(() => {
    switch (index) {
      case 0:
        window.location.href = '/#/'
        break
      case 1:
        window.location.href = '/#/hot'
        break
      case 2:
        window.location.href = '/#/search'
        break
      default:
        window.location.href = '/#/'
    }
  }, [index])
  return (
    <div className="tab-bar">
      <Tab key="0" index={0} isSelected={index === 0}>
        推荐音乐
      </Tab>
      <Tab key="1" index={1} isSelected={index === 1}>
        热歌榜
      </Tab>
      <Tab key="2" index={2} isSelected={index === 2}>
        搜索
      </Tab>
    </div>
  );
};

export default TabBar;
